<template>
    <img alt="Vue logo" src="./assets/logo.png" />
    <p>当前visible的值:{{ visible }}</p>
    <HelloWorld
        msg="Hello Vue 3 + Vite"
        @foo-click="fooClick"
        v-model:visible="visible"
    />
    <!-- <EmitButton @click-button="clickButton"></EmitButton> -->
    <RenderTest v-model:counter="counter">
        <template #default>title</template>
        <template #content>content...</template>
    </RenderTest>

    <p>Functional组件</p>
    <Functional :level="3" class="a">111</Functional>
    <p>asyncComp组件</p>
    <AsyncComp></AsyncComp>  

    <p>v-is的使用，切换组件</p>
    <button @click="changeComp('CompA')">切换到A组件</button>
    <button @click="changeComp('CompB')">切换到B组件</button>
    <component v-bind:is="currentView"></component>


    <table>
        <!-- <comp-a></comp-a> -->
        <!-- <component v-is="CompA"></component> -->
        <tr v-is="'CompA'"></tr>
    </table>

    <!-- 自定义指令-start -->
    <p v-highLight="'orange'">v-highLight</p>
    <!-- 自定义指令-end -->

    <!-- 动画-start -->
    <TransitionTest></TransitionTest>
    <!-- 动画end -->
</template>

<script >
import HelloWorld from "./components/HelloWorld.vue";
// import EmitButton from "./components/EmitButton.vue";
import Functional from './components/Functional.vue'
import CompA from './components/CompA.vue'
import CompB from './components/CompB.vue'
import TransitionTest from './components/TransitionTest.vue'
import { h, defineAsyncComponent} from "vue";

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md

export default {
    data() {
        return {
            visible: false,
            counter: 1,
            currentView:'CompA', // 当前显示的组件
        };
    },
    components: {
        HelloWorld,
        // EmitButton,
        Functional,
        CompA,
        CompB,
        TransitionTest,
        RenderTest: {
            props: {
                counter: {
                    type: Number,
                    default: 0,
                },
            },
            render() {
                return h("div", [
                    h(
                        "div",
                        {
                            onClick:() => {
                                this.$emit("update:counter", this.counter + 1);
                            },
                        },
                        [
                            `I am RenderTest: ${this.counter}`,
                            this.$slots.default(),
                            this.$slots.content(this.counter)
                        ]
                        
                    ),
                ]);
            },
        },
        AsyncComp: defineAsyncComponent({ // 异步组件的使用
            loader: () => import('./components/NextPage.vue'), 
            delay: 2000,
            timeout: 3000,
            errorComponent: null,
            loadingComponent: null
        })
    },
    methods: {
        fooClick() {
            console.log("父组件触发");
        },
        clickButton() {
            console.log("触发emitButton父组件的点击");
        },
        //改变组件
        changeComp(comp){
            this.currentView = comp
        }
    },
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
